<template>
  <div class="icon-container">
    <div class="icon-item">
      <img src="/path/to/home-icon.png" alt="主页">
      <span>主页首页</span>
    </div>
    <div class="icon-item">
      <img src="/path/to/book-icon.png" alt="读书">
      <span>读书感悟</span>
    </div>
    <div class="icon-item">
      <img src="/path/to/refresh-icon.png" alt="轮播">
      <span>轮播更新</span>
    </div>
    <div class="icon-item">
      <img src="/path/to/computer-icon.png" alt="技术">
      <span>技术专攻</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IconLinks'
}
</script>

<style scoped>
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 20px;
}

.icon-item img {
  width: 50px;
  height: 50px;
}

.icon-item span {
  margin-top: 10px;
}
</style>
